<template>
  <div class="search" :style="{width:searchwidth}">
      <h2 style="margin-top:20px;margin-left:15px">搜索结果：</h2>
      <div class="main_top">
          <div class="main_video">
              <div class="video_one" v-for="item in aaaaaa" :key="item.id" @click="gotail(item.id)">
                  <div class="video_ooo"> 
                    <img :src="item.image_url" alt="">
                    <p>{{item.name}}</p>
                    <div class="rate_user">
                        <a-rate :default-value="item.grade" disabled  allow-half/>
                        <span>发布人：{{item.teacher_name}}</span>
                    </div>
                    <div class="detail">
                        <div class="bottom_left">
                            <span>{{item.add_time}}</span>
                        </div>
                        <div class="bottom_right">
                            <span><a-icon type="eye" />{{item.click_nums}}</span>
                            <span><a-icon type="like" />{{item.give_like_nums}}</span>
                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="teach_all">
            <div class="teach_one" v-for="item in bbbbbb" :key="item.id" @click="teachail(item.id)">
                <img :src="item.image_url" alt="">
                <div class="teach_intro">
                    <h3>{{item.name}}</h3>
                    <p>（{{item.department_name}}）</p>
                    <span>个人简介：{{item.desc}}</span>
                    <div class="more">
                        <i>MORE ></i>
                    </div>
                </div>
            </div>
      </div>
      
  </div>
</template>

<script>
export default {
    data() {
        return {
            current:1,
            pageSize:15,
            total:0,
            aaaaaa:[],
            bbbbbb:[]
        }
    },
    methods:{
        gotail(id){
            this.$router.push({path:'/videodetail',query:{id:id}})
        },
        teachail(val){
            this.$router.push({path:'/teacherclass',query:{id:val}})
        },
    },
    watch:{
        '$store.state.sealist':function(newValue,oldValue){
            if(newValue[0].teacher){
                this.aaaaaa = newValue
                this.bbbbbb=[]
            }else{
                this.bbbbbb = newValue
                this.aaaaaa=[]
            }
        }
    },
    computed:{
        searchwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
}
</script>

<style lang='less' scoped>
.search{
    margin: 0 auto;
    .main_top{
        margin-top: 40px;
        .top_left{
            display: flex;
            justify-content: space-between;
            h2{
                display: inline-block;
            }
            .none{
                display: inline-block;
                width: 72%;
                height: 2vh;
                border-bottom: 1px dashed gray;
                margin: 0 3vw 0 3vw;
            }
            span{
                cursor: pointer;
                display: table;
                padding: 7px;
                padding-left: 14px;
                background: green;
                color: white;
                border-radius: 15px;
            }
        }
        .main_video{
            margin-bottom: 5vh;
            overflow: hidden;
            .video_one{
                width: 19%;
                margin: 1vh 1% 1vh 0;
                float: left;
                .video_ooo{
                    border: 1px solid gainsboro;
                    border-radius: 9px;
                    overflow: hidden;
                    background: white;
                    cursor: pointer;
                }
                img{
                    width: 100%;
                    height: 14vh;
                }
                p{
                    margin: 0.5vh 0 0.8vh 0;
                    font-size: 1vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    padding: 0 5px 0 5px;
                }
                .rate_user{
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px 0 5px;
                    .ant-rate-star:not(:last-child){
                        width: 15px;
                    }
                    span{
                        font-size: 12px;
                        margin-top: 8px;
                    }
                }
                .detail{
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px 5px 5px;
                    .bottom_right{
                        span{
                            margin-left: 5px;
                        }
                    }
                }
            }
        }
    }
    .teach_all{
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            .teach_one{
                width: 30%;
                display: flex;
                justify-content: space-between;
                padding: 20px;
                background: white;
                margin-bottom: 20px;
                border-radius: 17px;
                img{
                    width: 46%;
                    height: 230px;
                }
                .teach_intro{
                    width: 50%;
                    h3{
                        text-align: center;
                        font-weight: bolder;
                        margin: 0;
                        border-bottom: 1px dashed grey;
                        padding-bottom: 1vh;
                    }
                    p{
                        text-align: center;
                        letter-spacing: 1px;
                        border-bottom: 1px dashed grey;
                        padding-bottom: 1vh;
                        padding-top: 1vh;
                    }
                    span{
                        display: block;
                        height: 50%;
                        overflow: hidden;    
                    }
                    .more{
                        width: 5vw;
                        border-radius: 11px;
                        background: green;
                        height: 3vh;
                        color: white;
                        text-align: center;
                        cursor: pointer;
                        i{
                            font-style: normal;
                            letter-spacing: 2px;
                            font-weight: 700;
                            line-height: 3vh;
                        }
                    }
                }
            }
        }
}
</style>